<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <title>个人设置</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--[if lte IE 8]><script src="public/libs/jquery/flot/excanvas.min.js"></script><![endif]-->
	<!--[if lt IE 9]><script src="public/libs/html5/html5shiv.js"></script><![endif]-->
	<style type="text/css">
	body{
		min-width: 988px;
		overflow: hidden;
	}
	.middle{
		width: 760px;
		height: 500px;
		margin: auto;
		z-index:50;
	}
	.content{
		width:99.9%;
		height: 99.9%;
		position: absolute;
		left:0px;
		top:0px;
		z-index: 50;
		min-width: 988px;
	}
	.header{
		width:100%;
		height:60px;
		position: absolute;
		background-color: #F54339;
		top: 0px;
		left: 0px;
	}
	.zhxyLogo{
		position:absolute;
		width:423px;
		height:37px;
		top:13px;
		left:30px;
		background-image:url(img/login/logo.png);
		background-repeat:no-repeat;
	}
	.logo-content{
		width: 275px;
		height: 400px;
		float: left;
	}
	.logo2{
		width: 275px;
		height: 320px;
		float: left;
	}
	.logo3{
		width: 275px;
		height: 60px;
		float: left;
		margin-top: 19px;
	}
	.mainpage{
		float:right;
		width:400px;
		height:380px;
		margin-top: 30px;
	} 
	.loginInput{
		width:342px;
		height:50px;	
		margin-bottom:25px;
	}
	.loginInput-title{
		width:342px;
		height:50px;	
		line-height:50px;
		margin-bottom:25px;
		border-bottom:2px solid #32A5E7;
		color: #32A5E7;
		text-align: center;
		font-size: 32px;
		font-family: 微软雅黑;
	}
	.loginInput-span{
		position:absolute;
		display:inline;
		top:192px;
		left:642px;
		height:22px;
		line-height:22px;
		font-size:16px;
		color:#909090;
		margin-bottom:10px;
	}
	.error{
		width:342px;
		height:15px;
		display:block;
		margin-bottom:15px;
		margin-left:2px;
		color:red;
	}
	.loginType{
		width:342px;
		height:20px;
		line-height:20px;
		margin-bottom:30px;
		color: #747474;
		font-family: 微软雅黑;
	}
	.loginType input{
		width:12px;
		height:12px;
		margin:8px;
	}
	.loginBtn:hover{			
		background-color:#F54339;
	}
	.forgetPwd{
		float:right;
		height:20px;
		text-decoration:none;
		color:#00a7ea;
		cursor:pointer;
		margin-top:5px;
	}
	.footer{
		position:absolute;
		width:100%;
		height:45px;
		border-top:4px solid #ccc;
		line-height: 45px;
		bottom: 0px;
		left: 0px;
		color: #484848;
		text-align: center;
		font-size: 12px;
	}
	.foorter-link{
		width:1000px;
		margin:20px auto;
	}
	.foorter-link a{
		line-height:50px;
		margin:4px;
		text-decoration:none;
		color:#515151;
		cursor:pointer;
		font-size:13px;
	}
	.foorter-link span{
		line-height:50px;
		margin:4px;	
	}
	.user-role-check{
		cursor: pointer;
	}
	.back-img1{
		z-index:10;
		width: 180px;
		height: 200px;
		position: absolute;
		left: 30px;
		top:75px;
	}
	.back-img2{
		z-index:10;
		width: 180px;
		height: 200px;
		position: absolute;
		right: 30px;
		top:75px;
	}
	.back-img3{
		z-index:10;
		width: 180px;
		height: 200px;
		position: absolute;
		left: 30px;
		bottom:60px;
	}
	.back-img4{
		z-index:10;
		width: 180px;
		height: 200px;
		position: absolute;
		right: 30px;
		bottom:60px;
	}
	.sm.txt{
		height:24px;
		padding:6px 9px;
	}
	.txt{
		width:260px;
		height:38px;
		padding:8px 9px;
		border: 1px solid #eaeaea;
		font-size:12px;
		line-height:18px;
	}
	.table-left{
		text-align:right;
		font-size:12px;
	}
	.check-fail{
		width:130px;
		font-size:12px;
		color:red;
	}
	.bg-frame {
	    height: 100%;
	    left: 0;
	    position: absolute;
	    top: 0;
	    width: 100%;
	    z-index: -1;
	    border: 0px solid #fff;
	}
	.logo9{
		display:inline-block;
		width:225px;
		height:38px;
		line-height:38px;
		text-align:center;
		text-decoration:none;		
		color:#418DDA;
		background-color: #EAF4FE;
		font-size:18px;
		font-family: 微软雅黑;
		-moz-border-radius:30px;-webkit-border-radius:30px;border-radius: 30px;
	}
	.logo9:hover{
	    cursor: pointer;
		color:#fff;
		background-color: #7AB7F3;
	}
	.logo9-sel{
		color:#fff;
		background-color: #7AB7F3;
	}
	.loginBtn{
		display: inline-block;
	    width: 280px;
	    height: 43px;
	    line-height: 43px;
	    text-align: center;
	    cursor: pointer;
	    text-decoration: none;
	    color: #fff;
	    background-color: #32A5E7;
	    font-size: 17px;
	    margin-top: 15px;
	    font-family: 微软雅黑;
	}
	.info-table tr{
		height: 53px;
	}
	.setting-title{
		text-align:center;
	}
  </style>
	<script type="text/javascript" src="public/libs/jquery/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="public/libs/JSON/json2.js"></script>
	<script type="text/javascript" src="public/js/config.js"></script>
	<script type="text/javascript" src="public/js/ajax-crud.js"></script>
	<script type="text/javascript" src="public/libs/jquery/jquery-lhgdialog/lhgdialog.min.js?self=true&skin=idialog"></script>
	<script type="text/javascript" src="public/js/home-common.js"></script>
	
	<script type="text/javascript">
		var serverUrl = QualityCheck.GPUD.ServiceConfig;
		var AjaxCrud = QualityCheck.AjaxCRUD;
		var param = window.location.search;
		var paramStr = param.substring(1, param.length);
		var paramArr = paramStr.split("&");
		var codeIndex = paramArr[0].indexOf("=");
		var keyIndex = paramArr[1].indexOf("=");
		var typeIndex = paramArr[2].indexOf("=");
		var usercode = paramArr[0].substring(codeIndex+1,paramArr[0].length);
		var userKey = paramArr[1].substring(keyIndex+1,paramArr[1].length);
		var usertype = paramArr[2].substring(typeIndex+1,paramArr[2].length);
		$(function(){
			initbtn();
			initPage();
			window.onresize = function () {
				initPage();
			};
			initInfo();
		});
		function initbtn(){
			$("#alias").bind({
	    		blur:function(){
	   				if($("#alias").val() == ""){
						$("#user-alias-ex").text("昵称不能为空！");
					}
		    	},
		    	focus:function(){
		    		$("#user-alias-ex").html(""); 
		    	}
    		});
    		$("#oldpword").bind({
	    		blur:function(){
	   				if($("#oldpword").val() == ""){
						$("#user-oldpword-ex").text("旧密码不能为空！");
					}
		    	},
		    	focus:function(){
		    		$("#user-oldpword-ex").html(""); 
		    	}
    		});
    		$("#pword").bind({
	    		blur:function(){
	   				if($("#pword").val() == ""){
						$("#user-pword-ex").text("新密码不能为空！");
					}
		    	},
		    	focus:function(){
		    		$("#user-pword-ex").html(""); 
		    	}
    		});
    		$("#confirmpword").bind({
	    		blur:function(){
	   				if($("#confirmpword").val() == ""){
						$("#user-confirmpword-ex").text("确认密码不能为空！");
					}
		    	},
		    	focus:function(){
		    		$("#user-confirmpword-ex").html(""); 
		    	}
    		});
    		$("#email").bind({
	    		blur:function(){
	   				if((/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.(?:com|cn)$/.test($("#email").val()))){
						$("#user-email-ex").html("");
					}else{
						$("#user-email-ex").text("请输入正确的邮箱！");
					}
		    	},
		    	focus:function(){
		    		$("#user-email-ex").html(""); 
		    	}
    		});
    		$("#cellphone").bind({
	    		blur:function(){
	    			var cp = $("#cellphone").val();
	   				if((/^13\d{9}$/.test(cp))||(/^15[^4]\d{8}$/.test(cp))||(/^17\d{9}$/.test(cp))||(/^18\d{9}$/.test(cp))){
						$("#user-cellphone-ex").html("");
					}else{
						$("#user-cellphone-ex").text("请输入正确的手机号！");
					}
		    	},
		    	focus:function(){
		    		$("#user-cellphone-ex").html(""); 
		    	}
    		});
		
			$("#infosetBtn").unbind("click");
			$("#infosetBtn").click(function(){
				if(check1()){
					updateInfo();
				}
			});
			$("#pwdsetBtn").unbind("click");
			$("#pwdsetBtn").click(function(){
				if(check2()){
					updateInfo();
				}
			});
			$(".logo9").click(function(){
				var model = $(this).attr("model");
				$(".main").hide();
				$(".logo9").removeClass("logo9-sel");
				if(model == "info"){
					$("#mainInfo").show();
					$(".logo9[model='info']").addClass("logo9-sel");
				}else if(model == "pwd"){
					$("#mainPwd").show();
					$(".logo9[model='pwd']").addClass("logo9-sel");
				}
			});
			
		}
		function initInfo(){
			var data = {
				cmd:"getUserInfo",
				model:"user",
				userKey:userKey,
				data:{
					usercode:usercode, 
				},
				remark:"",
			};
			AjaxCrud.get(serverUrl.ServerLoginUrl,data,function(res){
				if(res.result == 1 && res.data != undefined && res.data != ""){
					var data = res.data;
					$("#alias").val(data.alias);
					$("#cellphone").val(data.cellphone);
					$("#email").val(data.email);
					$("#address").val(data.address);
					$("#remark").val(data.remark);
				}
			},null,null);
		}
		function check1(){
			if($("#alias").val() == ""){
				$("#user-alias-ex").text("昵称不能为空！");
				return false;
			}else{
				return true;
			}
		}
		function check2(){
			if($("#oldpword").val() == ""){
				$("#user-oldpword-ex").text("旧密码不能为空！");
				return false;
			}else if($("#pword").val() == ""){
				$("#user-pword-ex").text("新密码不能为空！");
				return false;
			}else if($("#confirmpword").val() == ""){
				$("#user-confirmpword-ex").text("确认密码不能为空！");
				return false;
			}else if($("#pword").val() != $("#confirmpword").val()){
				$("#user-confirmpword-ex").text("两次密码不一致！");
				return false;
			}else{
				return true;
			}
		}
		
		function updateInfo(){
			var name = encodeURI($("#alias").val());
			var oldpword = encodeURI($("#oldpword").val());
			var pword = encodeURI($("#pword").val());
			var cellphone = $("#cellphone").val();
			var email = encodeURI($("#email").val());
			var remark = encodeURI($("#remark").val());
			var address = encodeURI($("#address").val());
			
			var data = {
					cmd:"update",
					model:"user",
					userKey:userKey,
					data:{
						usercode:usercode,
						alias:name,
						oldpassword:oldpword,
						password:pword,
						usertype:usertype,
						cellphone:cellphone,
						email:email,
						remark:remark,
						address:address
					},
					remark:""					
			};
			processBegin("正在保存中···");
			QualityCheck.AjaxCRUD.get(QualityCheck.GPUD.ServiceConfig.ServerLoginUrl,data,function(res){
				if(res.error==""){
					$("#updatepword").hide();
					processEnd("修改成功！");
				}else{
					processError("你的密码有误，请重新再试！");
				}
			},null,null);	
		}
		function initPage(){
			var winH = document.documentElement.clientHeight || document.body.clientHeight;
			var topM = (winH - $(".middle").height())/2;
			$(".middle").css("margin-top",topM + "px");
		}
	</script>
  </head>
  <body>
  <div class="content">
	<div class="header">
		<div class="zhxyLogo"></div>
	</div>
	<div class="back-img1">
		<img src="img/login/left.png" width="100%" height="100%">
	</div>
	<div class="back-img2">
		<img src="img/login/right.png" width="100%" height="100%">
	</div>
	<div class="back-img3">
		<img src="img/login/left.png" width="100%" height="100%">
	</div>
	<div class="back-img4">
		<img src="img/login/right.png" width="100%" height="100%">
	</div>
	<div class="middle">
		<div class="setting-title">
			<p class="logo9 logo9-sel" model="info">基本设置</p>
			<p class="logo9" model="pwd">密码设置</p>
		</div>
		<div class="main" id="mainInfo">
			<table class="info-table" style="margin-left:25%;">
				<tr>
					<td class="table-left"><font color="red">*</font> 昵称：</td>
					<td class="table-middle">
						<input type="text" class="txt sm" id="alias"/>
					</td>
					<td class="table-right">
						<span class="check-fail" id="user-alias-ex"></span>
					</td>
				</tr>
				<tr>
					<td class="table-left">电话：</td>
					<td class="table-middle">
						<input type="text"  class="txt sm" id="cellphone"/>
					</td>
					<td class="table-right">
						<span class="check-fail" id="user-cellphone-ex"></span>
					</td>
				</tr>
				<tr>
					<td class="table-left">电子邮箱：</td>
					<td class="table-middle">
						<input type="text"  class="txt sm" id="email"/>
					</td>
					<td class="table-right">
						<span class="check-fail" id="user-email-ex"></span>
					</td>
				</tr>
				<tr>
					<td class="table-left">地址：</td>
					<td class="table-middle">
						<input type="text"  class="txt sm" id="address">
					</td>
					<td class="table-right">
						<span class="check-fail" id="user-address-ex"></span>
					</td>
				</tr>
				<tr>
					<td class="table-left">备注：</td>
					<td class="table-middle">
						<input type="text"  class="txt sm" id="remark"/>
					</td>
					<td class="table-right">
						<span class="check-fail" id="user-remark-ex"></span>
					</td>							
				</tr>
				<tr>
					<td class="table-left"></td>
					<td class="table-middle">
						<a class="loginBtn" id="infosetBtn">保&nbsp;存</a>
					</td>
					<td class="table-right">
						
					</td>							
				</tr>
			</table>
		</div>
		<div class="main" style="display:none;" id="mainPwd">
			<table class="info-table" style="margin-left:25%;">
				<tr>
					<td class="table-left"><font color="red">*</font> 旧密码：</td>
					<td class="table-middle">
						<input type="password"  class="txt sm" id="oldpword"/>
					</td>
					<td class="table-right">
						<span class="check-fail" id="user-oldpword-ex"></span>
					</td>
				</tr>
				<tr>
					<td class="table-left"><font color="red">*</font> 新密码：</td>
					<td class="table-middle">
						<input type="password"  class="txt sm" id="pword"/>
					</td>
					<td class="table-right">
						<span class="check-fail" id="user-pword-ex"></span>
					</td>
				</tr>
				<tr>
					<td class="table-left"><font color="red">*</font> 确认密码：</td>
					<td class="table-middle">
						<input type="password"  class="txt sm" id="confirmpword"/>
						
					</td>
					<td class="table-right">
						<span class="check-fail" id="user-confirmpword-ex"></span>
					</td>
				</tr>
				<tr>
					<td class="table-left"></td>
					<td class="table-middle">
						<a class="loginBtn" id="pwdsetBtn">保&nbsp;存</a>
					</td>
					<td class="table-right">
						
					</td>							
				</tr>
			</table>
		</div>
	</div>
	<div class="footer">
		<img style="vertical-align:middle;" src="img/login/logo4.png" width="53px" height="27px">&nbsp;&nbsp;Copyright © 2015 北京国斗星导航技术有限公司 All Rgiht Reserved
	</div>
  </div>
 </body>
</html>